<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>景点详情</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="description" content="Your description"/>
    <meta name="keywords" content="Your keywords"/>
    <meta name="author" content="Your name"/>
    <!-- CSS Style -->
    <link rel="stylesheet" th:href="@{/css/style1.css}">
    　<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>


    <script  type="text/javascript" th:inline="javascript">
        var pageNumber=[[${number}]];
        var first=[[${first}]];
        var last=[[${last}]];
        var totalPages=[[${totalPages}]]
        var html='<li class="active"><a th:if="${not first}" th:href="@{/dist/articleDetail(id=${article.id},start=${number-1})}">Previous</a>&nbsp;&nbsp;';

        var bo="";
        /*<![CDATA[*/
        /*for (var i=2;i<=totalPages;i++){
           // bo+='<li class="li"><a href="" onclick="page(i)">'+i+'</a>&nbsp;&nbsp;';
        }*/
        /*]]>*/
        html=html+bo+'<li class="next"><li class="active"><a th:if="${not last}" th:href="@{/dist/articleDetail(id=${article.id},start=${number+1})}">Next</a>&nbsp;&nbsp;'


        $(function() {
            var currentPage = 1;
            var totalPages = 2;
            $("#page").bootstrapPaginator({
                bootstrapMajorVersion: 3, //对应的bootstrap版本
                currentPage: currentPage, //当前页数
                numberOfPages: 10, //每次显示页数
                totalPages: totalPages, //总页数
                shouldShowPage: true, //是否显示该按钮
                useBootstrapTooltip: true,
                onPageClicked: function(event, originalEvent, type, page) {
                    console.log(page);
                }
            });
        });


        function comment() {
            $("#commentModal").modal('show');
        }

        function addComment() {
            var content=$("#content1").val();
            var articleId=[[${article.id}]]
            var data = JSON.stringify({content:content,articleId:articleId})
            console.log(data)
            $.ajax({
                type: "post",
                url: "/comment",
                data: data,
                contentType: "application/json; charset=utf-8",
                dataType:"JSON",
                success:function(result){
                    if (result.code==0){
                        alert("提交成功")
                    }else {
                        alert("提交失败！")
                    }
                    $("#content1").val("")
                    $("#articleModal").modal('hide');
                },
                error:function () {
                    alert('提交失败！');
                }
            })

        }



    </script>

</head>

<body class="single-product-page">


<!-- head 头部 -->
<div id="head" th:include="common/index_header :: copyheader"></div>
<br>
<!-- Main Container -->
<section class="main-container col1-layout">
    <div class="main">
        <div class="container">
            <div class="row">
                <div class="col-main">
                    <div class="product-view">
                        <div class="product-essential">
                                <div class="product-img-box col-lg-5 col-sm-6 col-xs-24">
                                    <div class="new-label new-top-left"> New </div>
                                    <div>
                                        <div style="font-size: medium;font-weight:bold">作者：<span th:text="${article.createBy}"></span><br>
                                            创建时间： <span th:text="${article.createTime}"></span>
                                        </div>
                                    </div>
                                    <!-- end: more-images -->
                                </div>
                                <div product-shop col-lg-7 col-sm-6 col-xs-12>
                                  <h1 th:text="${article.topic}"></h1>
                                  <div><span th:text="${article.content}"></span>
                                  </div>
                                 <div > <img style="width:200px;height:200px;" id="product-zoom" th:src="@{${article.picture}}" src="images/products/img02.jpg" data-zoom-image="images/products/img02.jpg" alt="product-image"> </div>
                                </div>

               </div>
               </div>
             </div>
            </div>

            <div>
                <div  class="row" id="table_refresh">

                    <div>
                        <h1><span>评论</span><button onclick="comment()"  style="margin-left: 80%;font-size: 25px;color: #00A8FF">评论</button></h1>
                        <div class="col-sm-12" th:each="attr : ${attrs}">
                            <div>
                                <div style="font-size: medium;font-weight:bold">作者：<span th:text="${attr.createBy}"></span><br>
                                    创建时间： <span th:text="${attr.createTime}"></span>
                                </div>
                            </div>
                            <div>评论内容：<span th:text="${attr.content}"></span>
                        </div>
                        <br>
                        <!--分页-->
                    </div>
                </div>
                <div class="pager_wrapper">
                    <ul class="pager clearfix" id="pages">
                        <li class="prev"><a th:if="${not first}" th:href="@{/dist/articleDetail(id=${article.id},start=${number -1})}">Previous</a></li>
                        <li class="next"><a th:if="${not last}" th:href="@{/dist/articleDetail(id=${article.id},start=${number+1})}">Next</a></li>

                    </ul>
                </div>
            </div>
        </div>
    </div>
    </div>
</section>

<div class="modal fade" id="commentModal"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <form enctype="multipart/form-data">
            <div class="modal-content" enc>
                <div class="modal-header"><h4 class="modal-title" >发布评论</h4></div>
                <div class="modal-body stu_modal">
                    <div class="form-group"><label>内容：</label><input type="textarea" class="form-control" id="content1"></div>
                    <div class="modal-footer"><button type="button" class="btn btn-save" data-dismiss="modal" onclick="addComment()">提交</button><button type="button" class="btn btn-theme-border" data-dismiss="modal">关闭</button></div>
                </div>
            </div>
        </form>
    </div>
</div>

<br>
<!--底部-->
<div th:include="common/index_footer :: copyfooter"></div>


<script th:src="@{/js2/owl.carousel.min.js}"></script>
<script th:src="@{/js2/main.js}"></script>







</body>
</html>